<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游路线</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        #main{
            margin: 0 auto;
            width: 50vw;
            height: 80vh;
            background-color: white;
        }
        #main_ul{
            padding: 0;
            li{
                height: 12vh;
                padding: 1vh auto;
                border: 1px #ddd solid;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                .center_text{
                    height: 9vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .title_text{
                    font-weight: bold;
                }
                .info_text{
                    font-size: 0.8rem;
                }
                .price_text{
                    color: #ff6600;
                    font-size: 1.5rem;
                }
                button{
                    width: 6vw;
                    height: 4vh;
                    background-color: #ff7b02;
                    color: white;
                    border: none;
                    border-radius: 8px;
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
        }
    </style>
</head>
<body>
    <div id="new_header">
        <script>
            $("#new_header").load("header.html");
        </script>
    </div>
    
    <!-- 正文部分 -->
    <div id="main">
        <ul id="main_ul">
            <!-- <li>
                <img src="imgs/1.png">
                <div class="center_text">
                    <div class="title_text">厦门——江门</div>
                    <div class="info_text">出团日期：2024-04-30至2024-05-07</div>
                    <div class="info_text">简介：白沙祠——圭峰山——开平碉楼</div>
                </div>
                <div><span class="price_text">￥300.0</span>起</div>
                <button onclick="bookingRoute()">我要预订</button>
            </li> -->
        </ul>
    </div>
    <script>
        $.getJSON(
            'UserServlet',
            {methodName: "getRouteList"},
            function (result){
                for(var i=0; i<result.length; i++){
                    var $newli = $("<li></li>");
                    $newli.append($("<img src='"+result[i].pictureUrl+"'>"));
                    var $new_div = $("<div class='center_text'></div>");
                    $new_div.append($("<div class='title_text'>"+result[i].title+"</div>"));
                    $new_div.append($("<div class='info_text'>出团日期："
                        +result[i].departureDate+"至"+result[i].endDate+"</div>"));
                    $new_div.append($("<div class='info_text'>简介："+result[i].introduce+"</div>"));
                    $newli.append($new_div);
                    $newli.append($("<div><span class='price_text'>￥"+result[i].price+"</span>起</div>"));
                    $newli.append($("<button onclick='bookingRoute("+result[i].id+")'>我要预订</button>"));
                    $("#main_ul").append($newli);
                }
            }
        );
        //预订指定id的路线
        function bookingRoute(routeId){
            console.log(routeId);
            $.ajax({
                url: "UserServlet",
                type: "get",
                data: "methodName=addOrder&routeId=" + routeId + "&type=旅游路线",
                success: function (result) {
                    alert($.trim(result));
                },
                error: function () {
                    alert("出现错误，请稍后再试");
                }
            });
        }
    </script>
</body>
</html>